<script lang="ts">
	import { createEventDispatcher, onMount } from 'svelte';
	import CircularProgress from '@smui/circular-progress';

	export let message: string = 'message';
	export let loading: boolean = false;
	export let success: boolean = false;
	export let duration: number = 10000;
	export let type: 'primary' | 'success' | 'danger' | 'warning' | 'info' | 'light' = 'light';

	const bgColorList = {
		primary: '#2563eb',
		success: '#10b981',
		danger: '#ef4444',
		warning: '#eab308',
		info: '#fbfbfb',
		light: '#f3f4f6'
	};

	const fontColorList = {
		primary: '#f3f4f6',
		success: '#f3f4f6',
		danger: '#f3f4f6',
		warning: '#f3f4f6',
		info: '#6b7280',
		light: '#6b7280'
	};

	const dispatch = createEventDispatcher();
	let instance: HTMLDivElement;

	function close() {
		dispatch('close');
	}

	onMount(function () {
		instance?.classList.add('animate-back-in-down');
		if (duration) {
			setTimeout(() => {
				close();
			}, duration);
		}
	});
</script>

<div
	bind:this={instance}
	style={`background-color: ${bgColorList[type]}; color: ${fontColorList[type]}`}
	class="flex-cc transition-background-color transition-delay-500 transition-duration-600 pl-5px min-w-250px fixed top-100px right-20px bg-blue-6 rounded-md w-fit animate-delay-300 h-60px line-height-60px shadow-sm shadow-gray-7 text-center"
>
	<div class="w-40px h-40px flex-cc">
		{#if loading}
			<CircularProgress
				style={`height: 24px; width: 24px; --mdc-theme-primary: ${fontColorList[type]}`}
				indeterminate
			/>
		{:else}
			<span
				class="material-symbols-outlined"
				style={`height: 24px; width: 24px; --mdc-theme-primary: ${fontColorList[type]}`}
			>
				lightbulb
			</span>
		{/if}
	</div>
	{#if success}
		<div class="w-40px h-40px flex-cc">
			<span class="material-icons color-green-5 font-size-36px!">check</span>
		</div>
	{/if}
	<span class="flex-1">{message}</span>
	<span class="material-icons w-2em flex-cc button-text active:filter-contrast-80" on:click={close}
		>close</span
	>
</div>
